<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="../js.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="app">
        <div class="box">
            <div class="box-context">
                <table>
                    <thead>
                        <th>序号</th>
                        <th>名称</th>
                        <th>单价/个</th>
                        <th>数量/元</th>
                        <th>小计/元</th>
                        <th>操作</th>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in Arr">
                            <td><span>{{index}}</span></td>
                            <td><span>{{item.name}}</span></td>
                            <td><span>{{item.price}}</span></td>
                            <td>
                                <button @click="minus(item.id)">-</button>
                                <span>{{item.num}}</span>
                                <button @click="add(item.id)">+</button>
                            </td>
                            <td><span>{{item.sum}}</span></td>
                            <td><button @click="del(item.id)">删除</button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <td>总计</td>
                        <td><button @click="inputBox">添加水果</button></td>
                        <td>/</td>
                        <td>{{count}}</td>
                        <td>{{account}}</td>
                        <td>/</td>
                    </tfoot>
                </table>
                <div class="input-box" v-show="isShow">
                    <span>名称:</span>
                    <input type="text" v-model="Gname"><br>
                    <span>单价:</span>
                    <input type="text" v-model.number="Gprice"><br><br>
                    <button @click="certain">确定</button>
                    <button>取消</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0,
                account: 0,
                isShow:false,
                Gname : '',
                Gprice : '',
                Arr: [
                    { id: 0, name: '苹果', price: 1, num: 0, sum: 0 },
                    { id: 1, name: '香蕉', price: 2, num: 0, sum: 0 },
                    { id: 2, name: '菠萝', price: 3, num: 0, sum: 0 },
                ],
            },
            methods: {
                //减少模块
                minus(id) {
                    for (let i = 0; i < this.Arr.length; i++) {
                        if (this.Arr[i].id == id && this.Arr[i].num != 0) {
                            this.Arr[id].num = this.Arr[id].num -= 1
                            this.Arr[id].sum = this.Arr[id].num * this.Arr[id].price
                            this.account -= this.Arr[id].price
                            this.count -= 1
                        }
                    }
                },
                //添加模块

                add(id) {
                    for (let i = 0; i < this.Arr.length; i++) {
                        if (this.Arr[i].id == id) {
                            this.Arr[id].num = this.Arr[id].num += 1
                            this.Arr[id].sum = this.Arr[id].num * this.Arr[id].price
                            this.account += this.Arr[id].price
                            this.count += 1
                        }
                    }
                },

                //删除模块
                del(id) {
                    for (let i = 0; i < this.Arr.length; i++) {
                        if (this.Arr[i].id == id) {
                            this.account -= this.Arr[i].sum
                            this.count -= this.Arr[i].num
                            this.Arr.splice(i, 1)
                        }
                    }
                },
            
                //弹出接受栏
                inputBox(){
                    this.isShow = true
                },

                //确定模块
                certain(){
                    this.isShow = false
                    container = {
                        id : this.Arr.length,
                        name : this.Gname,
                        price : this.Gprice,
                        num : 0,
                        sum : 0
                    }
                    this.Arr.push(container)
                    this.Gname = null
                    this. Gprice = null
                },

                //取消模块
                cancel(){
                    this.isShow = false
                    this.Gname = null
                    this. Gprice = null
                }
            }
        })
    </script>
</body>

</html>